<template>
  <page-container>
    <a-spin :spinning="spinning" tip="正在加载...">
      <public-page-search @page-search-change="pageSearchChange"></public-page-search>
      <a-row :span="24" :gutter="10" style="margin-top: 10px">
        <a-col :span="12">
          <a-card size="small">
            <template #title>
              <div>
                <img
                  src="@/assets/image/statistics/ai.svg"
                  alt=""
                  style="height: 40px; position: absolute; left: -3px; top: -3px"
                />
                <span style="margin-left: 36px">颗粒要素占比统计</span>
              </div>
            </template>
            <active-pie
              :data="pieData"
              :height="350"
              :fieldNames="{
                name: 'featureName',
                value: 'caseNum',
              }"
              @zrender:click="intelligenceClick"
              key="pie"
              title="要素总量"
              v-if="pieData.length"
            />
            <a-empty v-else style="margin-top: 37px" />
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card size="small">
            <template #title>
              <div>
                <img
                  src="@/assets/image/statistics/ai.svg"
                  alt=""
                  style="height: 40px; position: absolute; left: -3px; top: -3px"
                />
                <span style="margin-left: 36px">要素涉警量排名(top30)</span>
              </div>
            </template>
            <bar
              v-if="histogramhList.length"
              :data="histogramhList"
              :height="350"
              type="智能"
              :fieldNames="{
                name: 'featureValue',
                value: 'caseNum',
              }"
              @zrender:click="chartClickHandle"
            />
            <a-empty v-else style="margin-top: 37px" />
          </a-card>
        </a-col>
      </a-row>
      <police-list-drawer
        v-model:visible="visible"
        :title="listTile"
        :portionUrl="portionUrl"
        :params="policeDrawerParams"
        topicType="ai"
      />
    </a-spin>
  </page-container>
</template>
<script lang="ts">
import PublicPageSearch from '@/views/intelligent-analysis/components/public-page-search/index.vue';
import { ref, defineComponent, reactive } from 'vue';
import { queryCaseFeatureStat, queryFeatureValue } from '@/api/intelligentanalysis/grain';
import bar from '@/components/charts/bar/index.vue';
import ActivePie from '@/components/charts/pie/active-pie/index.vue';
import PoliceListDrawer from '@/components/police-list-drawer/index.vue';
import { PublicQueryState } from '@/views/intelligent-analysis/typing';
import { getInitParams } from '@/views/intelligent-analysis/js/publicQuery';
import { isNil } from 'lodash';

export default defineComponent({
  name: 'intelligent-analysis-grain', // AI专题感知-情报颗粒
  components: {
    PublicPageSearch,
    PoliceListDrawer,
    ActivePie,
    bar,
  },
  setup() {
    const spinning = ref<boolean>(true);
    const visible = ref<boolean>(false);
    const listTile = ref<string>('');
    const portionUrl = ref<string>('');
    const policeDrawerParams = ref<any>([{}]);
    const histogramhList = ref<any>([]);
    const pieData = ref<any>([]);
    const publicParams = getInitParams('statistics');

    const queryForm: PublicQueryState = reactive({
      ...publicParams,
      featureCode: '',
    });
    // AI专题感知-情报颗粒度-饼图
    const handleCaseFeatureStat = () => {
      spinning.value = true;
      queryCaseFeatureStat(queryForm)
        .then(res => {
          if (res.code === 200) {
            pieData.value = res.data;
          } else {
            pieData.value = [];
          }
        })
        .catch(err => {
          pieData.value = [];
          console.log('AI专题感知-情报颗粒度-饼图err=', err);
        })
        .finally(() => {
          spinning.value = false;
        });
    };
    // AI专题感知-情报颗粒度-柱状图
    const handlequeryFeatureValue = () => {
      spinning.value = true;
      queryFeatureValue(queryForm)
        .then(res => {
          if (res.code === 200) {
            histogramhList.value = res.data;
          } else {
            histogramhList.value = [];
          }
        })
        .catch(err => {
          histogramhList.value = [];
          console.log('AI专题感知-情报颗粒度-柱状图err=', err);
        })
        .finally(() => {
          spinning.value = false;
        });
    };

    const chartClickHandle = e => {
      visible.value = true;
      listTile.value = histogramhList.value[e].featureValue;
      portionUrl.value = '/aitype/caseInfo/queryCaseList';
      const featureCode = histogramhList.value[e].featureCode;
      const featureValue = histogramhList.value[e].featureValue;
      policeDrawerParams.value = {
        ...queryForm,
        inputParams: queryForm.inputParams,
        element: featureValue,
        featureCode,
        featureValue,
        grain: true,
        page: 1,
        size: 10,
      };
    };
    const intelligenceClick = (e: any) => {
      const dataIndex = e?.target?.dataIndex;
      if (!isNil(dataIndex)) {
        const featureCode = pieData.value[dataIndex].featureCode;
        if (queryForm.featureCode == featureCode) {
          queryForm.featureCode = '';
        } else {
          queryForm.featureCode = featureCode;
        }
      } else {
        queryForm.featureCode = '';
      }
      handlequeryFeatureValue();
    };

    const pageSearchChange = params => {
      Object.keys(queryForm).forEach(key => {
        Object.prototype.hasOwnProperty.call(params, key) && (queryForm[key] = params[key]);
      });
      queryForm.featureCode = '';
      handleCaseFeatureStat();
      handlequeryFeatureValue();
    };
    return {
      listTile,
      visible,
      portionUrl,
      policeDrawerParams,
      chartClickHandle,
      histogramhList,
      handleCaseFeatureStat,
      pieData,
      intelligenceClick,
      pageSearchChange,
      spinning,
    };
  },
});
</script>
<style lang="less" scoped>
:deep(.ant-card-head) {
  height: 48px;
  padding-top: 5px;
  font-size: 14px;
  background: #34363c;
  //   border: 1px solid #57617b;
}
:deep(.ant-card-head-wrapper) {
  padding-top: 4px;
}
</style>
